<template>
  <div class=""
       :style="{
          width: val.w + 'px',
          height: val.h + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor
       }"></div>
</template>
<script>
  import echarts from 'echarts';

  require('echarts/theme/macarons');
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';

  const NAME = 'vpd-chartTypeLine';
  const setting = {
    type: NAME,
    dataType: 'number',
    x: 0,
    y: 0,
    w: 800,
    h: 400,
    minWidth: 20,
    minHeight: 20,
    fontSize: 14,
    color: '#000',
    backgroundColor: '#fff',
    min: 0, //最小值
    max: 100, //最大值
    splitNumber: 10,
    dataName: 'echarts图表',
    borderWidth: 1,
    borderColor: '#E8EBEE',
    chartContent: ''
  };
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'chart',
    title: 'echarts图表',
    panel: StylePane,
    setting: setting,
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        setting: JSON.parse(JSON.stringify(setting)),
        data: '',
        chart: null
      }
    },
    computed: {
      configChange() {
        const {dataName, min, max, splitNumber} = this.val;
        return {dataName, min, max, splitNumber};
      }
    },
    watch: {
      'val.w': function (val) {
        //改变图表尺寸，在容器大小发生改变时需要手动调用
        this.$nextTick(() => {
          this.chart.resize();
        });
      },
      'val.h': function (val) {
        this.$nextTick(() => {
          this.chart.resize();
        });
      },
      configChange: function (val) {
        if (this.chart) {
          this.chart.setOption(this.getOption(0));
        }
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose();
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        this.chart.setOption(this.getOption(0));
      },
      getOption(value) {
        if(value == 0){
          const chartData = JSON.parse(this.val.chartContent)
          return chartData.option;
        }else{
          return value.option;
        }
      },

      updateData(data) {
        if(typeof(data)== "undefined" || JSON.stringify(data) == "{}"){

        }else {
          this.chart.setOption(this.getOption(data), true);
        }
      }
    }
  }
</script>
<style scoped>

</style>
